<template>
  <!-- <div class="bc-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item class="bc-item" :to="{ path: '/home' }">首页</el-breadcrumb-item>
    </el-breadcrumb>
  </div> -->
  <div class="home-container">
    <div class="box">
      <div class="header">
        <h3>多维度企业尽职调查，智能研判企业招商价值</h3>
        <div @click="onDueDiligence">点击进入<img src="../../assets/images/Home/arrows-right.png" alt=""></div>
      </div>
      <div class="box-list">
        <div class="box-item" v-for="(item, index) in homeData" :key="index">
          <div class="title" :class="'t' + (index + 1)">
            <div class="title-img">
              <img :src="item.icon" alt="">
            </div>
            <div class="text-list">
              <div class="title-text"><span>{{ item.title }}</span></div>
              <ul>
                <li v-for="(childItem, childIndex) in item.list" :key="childIndex">{{ childItem }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box box2">
      <div class="header">
        <h3>AI大模型算法赋能，高效分析招商项目价值</h3>
        <div @click="onAIAnalysis">点击进入<img src="../../assets/images/Home/arrows-right.png" alt=""></div>
      </div>
      <div class="box-list">
        <div class="box-item" v-for="(item, index) in homeData2" :key="index">
          <div class="title">
            <div class="title-img">
              <img :src="item.icon" alt="">
            </div>
            <div class="title-text"><span>{{ item.title }}</span></div>
          </div>
          <div class="text-list">
            <ul>
              <li :class="{ 'liRow': item.list.length <= 4 }" v-for="(childItem, childIndex) in item.list"
                :key="childIndex">{{ childItem }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"
import { useTopNavStore } from "../../stores/TopNav"
import icon_h1 from "../../assets/images/Home/h1.png"
import icon_h2 from "../../assets/images/Home/h2.png"
import icon_h3 from "../../assets/images/Home/h3.png"
import icon_h4 from "../../assets/images/Home/h4.png"
import icon_a1 from "../../assets/images/Home/a1.png"
import icon_a2 from "../../assets/images/Home/a2.png"
import icon_a3 from "../../assets/images/Home/a3.png"


const router = useRouter()
const topNavStore = useTopNavStore()

const onDueDiligence = () => {
  topNavStore.active = "/DueDiligence"
  router.push("/DueDiligence")
}

const onAIAnalysis = () => {
  topNavStore.active = "/AIAnalysis"
  router.push("/AIAnalysis")
}

const homeData = [
  {
    title: "招商准入",
    icon: icon_h1,
    list: ["企业基本情况", "企业纳税信息", "投资布局信息", "科技创新信息", "企业融资信息", "司法涉诉信息", "企业就业信息", "企业关联风险"]
  },
  {
    title: "电力分析",
    icon: icon_h3,
    list: ["企业用电基本信息", "企业电费分析", "企业电费分析", "企业用电行为分析"]
  },
  {
    title: "财务分析",
    icon: icon_h2,
    list: ["企业资产分析", "企业收入分析", "企业负债分析", "企业利润分析", "所有者权益分析", "企业纳税分析"]
  },
  {
    title: "供应链分析",
    icon: icon_h4,
    list: ["企业采购基本信息", "企业销售基本信息", "上下游交易商品分析", "上下游交易对手分析"]
  }
]

const homeData2 = [
  {
    title: "行业智能研判",
    icon: icon_a3,
    list: ["行业概括分析", "产业链上中下游分析", "产业市场规模分析", "发展趋势分析", "投资决策建议", "代表企业分析", "行业政策分析", "技术创新分析", "行业风险分析"]
  },
  {
    title: "企业竞争力分析",
    icon: icon_a2,
    list: ["企业基本信息", "主营产品/服务", "所在行业竞争格局", "企业产品竞争力", "企业创新能力", "企业标准制定"]
  },
  {
    title: "产业市场规模分析",
    icon: icon_a1,
    list: ["产品应用领域", "产品市场规模", "产品市场驱动因素", "产品未来市场空间"]
  }
]

</script>
<style lang="less" scoped>
@font-face {
  font-family: 'Alibaba PuHuiTi';
  src: 
    url('../../assets/font/Alibaba-PuHuiTi-Bold.ttf') format('ttf'),
    url('../../assets/font/Alibaba-PuHuiTi-Light.ttf') format('ttf'),
    url('../../assets/font/Alibaba-PuHuiTi-Medium.ttf') format('ttf');
}

.home-container {
  background: url("../../assets/images/Home/home-bg.png") no-repeat;
  border-radius: 5px;
  padding: 30px 5%;
  height:calc(100vh - 130px);

  .box {
    width: 100%;

    .header {
      text-align: center;
      position: relative;

      h3 {
        font-weight: bold;
        font-size: 25px;
        color: #323232;
      }

      div {
        position: absolute;
        width: 120px;
        height: 30px;
        line-height: 30px;
        background: #536EF7;
        border-radius: 2px;
        color: #fff;
        top: 10px;
        right: 0;
        cursor: pointer;

        img {
          width: 20px;
          margin-left: 10px;
        }
      }
    }

    .box-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .box-item {
        width: 50%;
        margin-top: 30px;

        .title {
          display: flex;

          .title-img {
            img {
              width: 80px;
              height: 80px;
            }
          }

          .text-list {
            margin-left: 40px;

            .title-text {
              font-weight: 700;
              font-size: 20px;
              color: #333333;
            }

            ul {
              li {
                float: left;
                width: 130px;
                font-weight: 400;
                font-size: 14px;
                color: #606060;
                line-height: 30px;
                font-family: "Alibaba PuHuiTi";
              }
            }
          }
        }
      }

      .box-item:nth-child(odd) {
        width: 50%;
      }

      .box-item:nth-child(even) {
        width: 40%;
      }
    }
  }

  .box2 {
    margin-top: 50px;

    .header {
      text-align: center;

      h3 {
        font-weight: bold;
        font-size: 25px;
        color: #323232;
      }

      div {
        position: absolute;
        width: 120px;
        height: 30px;
        line-height: 30px;
        background: #536EF7;
        border-radius: 2px;
        color: #fff;
        top: 10px;
        right: 0;
        cursor: pointer;

        img {
          width: 20px;
          margin-left: 10px;
        }
      }
    }


    .box-list {
      display: flex;
      margin-top: 10px;

      .box-item {
        flex: 1;
        margin-right: 80px;
        text-align: center;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, .1);

        .title {
          width: 100%;
          text-align: center;
          display: flex;
          flex-direction: column;

          .title-img {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              display: block;
              width: 60px;
              height: 60px;
              margin-top: 10px;
            }
          }

          span {
            display: block;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            margin-top: 20px;
          }
        }

        .text-list {
          ul {
            overflow: hidden;
            clear: both;
            padding: 10px 20px;

            li {
              float: left;
              width: 50%;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #000000;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: nowrap;
            }

            .liRow {
              width: 100%;
              float: none;
            }
          }
        }
      }

      .box-item:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
